<template>
	<view>
		<view class="food-list">
			<view class="food-item" v-for="(item,index) in foodList" :key="index">
				<img class="food-image" :src="item.img" alt="">
				<view class="food-description">{{item.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				foodList:[
					{
						id:1,
						img:"/static/images/food1.jpg"
						name:'锅包肉',
						desc:'色泽金黄，口味酸甜'
					},
					{
						id:2,
						img:'/static/images/food2.jpg',
						name:'鱼香肉丝',
						desc:'咸、甜、酸、辣兼备'
					},
					{
						id:3,
						img:'/static/images/food3.jpg',
						name:'茄汁大虾',
						desc:'甜中带酸'
					},
					{
						id:4,
						img:'/static/images/food4.jpg',
						name:'京酱肉丝',
						desc:'咸甜适中，酱香浓郁，通常搭配葱丝和豆腐皮食用，口感独特，风味独特'
					}
				]
			};
		}
	}
</script>

<style lang="scss">
.food-list{
	padding: 20rpx;
}
.food-item{
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
	border: 1px solid #ddd;
	padding: 10rpx;
	border-radius: 5px;
}
.food-image{
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin-right: 10px;
}
.food-info{
	flex: 1;
}
.food-name{
	font-size: 18px;
	font-weight: bold;
}
.food-description{
	color: #666;
}
</style>
